<script setup lang="ts">
	defineProps<{
		avatarSrc : string,
		name : string,
		datetime : string,
		prizeName : string,
		prizeType : string,
		combatPrizeQuality : string,
	}>()
</script>

<template>
	<view class="record-content">
		<view class="user-info">
			<image class="round-avatar" :src="avatarSrc" />
			<view class="name-time">
				<view class="name" style="color: #ffffff;">{{ name }}</view>
				<view class="datetime" style="color: rgba(255, 255, 255, 0.65);">{{ datetime }}</view>
			</view>
		</view>

		<view class="prize-extra">
			<!--      <view v-if="prizeQuality === '优质款'" class="prize-quality quality-a">-->
			<!--        <text>优质款</text>-->
			<!--      </view>-->
			<!--      <view v-if="prizeQuality === '普通款'" class="prize-quality quality-b">-->
			<!--        <text>普通款</text>-->
			<!--      </view>-->
			<view class="prize-quality quality-a">
				<text>{{ prizeType }}</text>
			</view>
			<!--      <view v-if="combatPrizeQuality" class="prize-quality quality-c">-->
			<!--        <text>{{ combatPrizeQuality }}</text>-->
			<!--      </view>-->
			<text class="prize-name">{{ prizeName }}</text>
		</view>
	</view>
</template>

<style scoped lang="scss">
	$font-sm: 12px;

	.name-time {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 2px 0;
		font-size: $font-sm;
	}

	.record-content {
		font-size: 12px;
		font-weight: medium;
		display: flex;
		color: #7A5E15;
		justify-content: space-between;

		.round-avatar {
			border-radius: 100%;
			height: 41px;
			width: 41px;
			background-color: white;
			border: 1px solid white;
		}

		.user-info {
			display: flex;
			gap: 4px;
		}

		.prize-extra {
			padding: 2px 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			color: white;
			font-size: 10px;
			font-weight: medium;
		}

		.prize-name {
			font-size: 28rpx;
			color: #ffffff;
		}

		.prize-quality {
			width: 40px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.prize-quality.quality-a {
			background: linear-gradient(115deg, #FFE814 0%, #E3A917 100%);
		}

		.prize-quality.quality-b {
			background: linear-gradient(115deg, #CCCCCC 0%, #424242 100%);
		}

		.prize-quality.quality-c {
			background: linear-gradient(115deg, #E174ED 0%, #2F76EC 100%);
			border-radius: 6px;
		}
	}
</style>